<template>
  <div class="terrainSlope">
    <div class="terrainSlope-top">
      <span>
        坡度坡向分析
      </span>
      <el-popover
          class="terrainSlope-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="点击'选择区域'后，鼠标左键在模型中绘制该分析区域的多个顶点，鼠标右键结束绘制区域，根据绘制顶点形成的区域自动分析结果">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="terrainSlope-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="terrainSlope-data">
      <el-form ref="terrainSlopeData" :model="terrainSlopeObj" label-width="120px">
        <el-form-item label="是否显示箭头">
          <el-switch v-model="terrainSlopeObj.showArrow"></el-switch>
        </el-form-item>
        <el-form-item label="模式">
          <el-radio-group v-model="terrainSlopeObj.colorMode">
            <el-radio :label="1">坡度</el-radio>
            <el-radio :label="2">坡向</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="箭头颜色">
          <el-color-picker color-format="rgb" v-model="terrainSlopeObj.arrowColor"></el-color-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="terrainSlope-btn">
      <el-button @click="selectTerrainSlope()">选择区域</el-button>
      <el-button @click="delTerrainSlope()">删除</el-button>
      <el-button @click="closeTerrainSlope()">关闭</el-button>
      <el-button @click="saveTerrainSlope()">保存</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/AnalysisTools/terrainSlope';
</style>
<script>
/* eslint-disable */

export default {
  name: "terrainSlope",
  data() {
    return {
      terrainSlopeObj: {
        //是否显示箭头
        showArrow: true,
        //1:坡度,2:坡向，默认值：1
        colorMode: 1,
        arrowColor: 'rgb(255,255,255)',
      },
    }
  },
  methods: {
    extractRGBComponents(colorString) {
      const rgbRegExp = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
      const match = colorString.match(rgbRegExp);
      if (match) {
        return [parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255];
      } else {
        return null;
      }
    },
    selectTerrainSlope() {
      let color = this.extractRGBComponents(this.terrainSlopeObj.arrowColor)
      let obj = {
        showArrow: this.terrainSlopeObj.showArrow,
        colorMode: this.terrainSlopeObj.colorMode,
        arrowColor: color,
      }
      console.log(obj)
      __g.tools.startTerrainSlopeAnalysis(obj);
    },
    delTerrainSlope() {
      __g.tools.stopTerrainSlopeAnalysis();
    },
    closeTerrainSlope() {
      this.$emit('close-popup');
      this.reloadTerrainSlope()
    },
    reloadTerrainSlope() {
      this.sunshineObj = {
        showArrow: true,
        colorMode: 1,
        arrowColor: 'rgb(255,255,255)',
      }
    },
    saveTerrainSlope() {
      this.$message.success("开发中")
    },
  },
  mounted() {

  },
  created() {

  },
  destroyed() {
    this.reloadTerrainSlope()
  },
};
</script>